<!--
   vue html scss
   left 功能（个人信息，模块，对话历史，收藏）
   -->
<template>
  <div>
    <div
      :class="[
        'handle_class',
        handleShow ? 'show' : 'hide',
        widthSizeType === 'min' ? 'webapp' : '',
      ]"
    >
      <div class="strut_box">
        <!-- 个人信息 head -->
        <headers :userInfor="userInfor" @change="newChange"></headers>
        <div class="function_set">
          <!-- 新对话框 -->
          <but
            @change="funCut(item)"
            :account="moduleType === item.type && !contextId"
            colorBlack
            v-for="item in functionData"
            :key="item.type"
            :icon="item.icon"
            >{{ item.name }}</but
          >
          <!-- 最近对话 -->
          <div class="historical_dialogue">
            <but @change="cutShowSquare" showTitle icon="el-icon-chat-square"
              >最近对话
              <i
                slot="foot"
                :class="{ rotate: !showSquare }"
                class="el-icon-arrow-down"
              ></i>
            </but>
            <div v-loading="loading" class="collapse-container">
              <div class="square" :class="{ squareHeight: !showSquare }">
                <but
                  @change="isActiveCut({ ...item, type: 'CHAT' })"
                  :account="contextId === item.contextId"
                  class="but_chat"
                  v-for="(item, index) in chatData"
                  :key="item.contextId"
                  >{{ item.contextName }}
                  <div slot="foot">
                    <span @click.stop class="el-dropdown-link">
                      <i
                        ref="dropdownElement"
                        @click="cilckDropdown(item, index)"
                        class="el-icon-more content_list_icon"
                      ></i>
                    </span>
                  </div>
                </but>
                <div v-if="!chatData.length">
                  <p class="no_data">暂无对话</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 收藏夹 -->
        <div class="foot_location">
          <but class="location" showTitle icon="el-icon-collection-tag"
            >收藏夹
          </but>
        </div>
      </div>
    </div>
    <!-- 遮罩 -->
    <div
      @click="$store.dispatch('aiChat/setStatus', false)"
      v-show="widthSizeType === 'min' && handleShow"
      class="shade"
    ></div>
    <el-dialog
      title="编辑对话名称"
      append-to-body
      style="margin-top: 30vh"
      :visible.sync="dialogVisible"
      width="400px"
    >
      <h-input
        v-model="formData.contextName"
        placeholder="请输入对话名称"
      ></h-input>

      <span slot="footer" class="dialog-footer">
        <HButtom @click="dialogVisible = false">取 消</HButtom>
        <HButtom type="primary" :loading="loading" @click="submit"
          >确 定</HButtom
        >
      </span>
    </el-dialog>
    <dropdown
      ref="refDropdown"
      @command="command"
      :dropdownItem="dropdownItem"
      :dataList="dropdownData"
    >
    </dropdown>
  </div>
</template>

<script>
import HButtom from "./utils/HButtom.vue";
import HInput from "./utils/HInput.vue";
import { updateChatData } from "@/api/aiChat.js";
import but from "./leftBox/but.vue";
import dropdown from "./utils/dropdown.vue";
import headers from "./leftBox/headers.vue";
export default {
  name: "AiHandle",
  components: {
    headers,
    HInput,
    but,
    dropdown,
    HButtom,
  },
  watch: {
    widthSizeType(val) {
      if (val === "min") {
        this.$store.dispatch("aiChat/setStatus", false);
      }
    },
  },
  computed: {
    chatData() {
      return this.$store.state.aiChat.chatData;
    },
    // 设备
    widthSizeType() {
      return this.$store.state.aiChat.widthSizeType;
    },
    // left 是否折叠
    handleShow() {
      return this.$store.state.aiChat.handleShow;
    },
    moduleType() {
      return this.$store.state.aiChat.moduleType;
    },
    contextId() {
      return this.$store.state.aiChat.contextId;
    },
    functionData() {
      return this.$store.state.aiChat.functionData;
    },
  },
  data() {
    return {
      dropdownItem: {
        rect: {},
        item: {},
      },
      dropdownData: [
        { type: "undate", name: "重命名" },
        { type: "delete", textColor: "red", name: "删除" },
      ],
      loading: false,
      formData: {},
      dialogVisible: false,
      showSquare: true,
      userInfor: {
        name: "AI助手",
        jobNumber: "6666666",
        headUrl: require("@/assets/images/morenImg.png"),
      },
    };
  },
  methods: {
    cilckDropdown(row, index) {
      this.dropdownItem = {
        rect: this.$refs.dropdownElement[index].getBoundingClientRect(),
        item: row,
      };
      this.$refs.refDropdown.toggleDropdown();
    },
    // 修改对话框
    submit() {
      if (!this.formData.contextName) {
        return console.log("请填写对话名称");
      }
      this.loading = true;
      updateChatData(this.formData).then(() => {
        this.$store.dispatch("aiChat/getChatData").then(() => {
          this.dialogVisible = false;
          this.loading = false;
        });
      });
    },
    // 删除对话框
    deleteList(row) {
      this.$confirm("确认删除该对话吗？")
        .then(() => {
          this.loading = true;
          this.$store
            .dispatch("aiChat/deleteChatData", row.contextId)
            .then(() => {
              this.$store.dispatch("aiChat/setContextId", row.contextId);
              this.$store.dispatch("aiChat/getChatData").then(() => {
                this.loading = false;
              });
            });
        })
        .catch(() => {});
    },
    command(type, row) {
      if (type === "undate") {
        // 重命名
        this.formData = {
          contextId: row.contextId,
          contextName: row.contextName,
        };
        this.dialogVisible = true;
      } else if (type === "delete") {
        // 删除
        this.deleteList(row);
      }
    },
    // 对话框
    newChange(row) {
      this.operation(row);
    },
    // 功能类型
    funCut(row) {
      this.operation(row);
    },
    // 最近对话
    isActiveCut(row) {
      this.operation(row);
    },
    // 操作
    operation(row) {
      if (this.widthSizeType === "min") {
        this.$store.dispatch("aiChat/setStatus", false);
      }
      this.$store.dispatch("aiChat/setModuleType", row.type);
      this.$store.dispatch("aiChat/setContextId", row.contextId);
      this.$emit("changeChat", this.contextId);
    },
    // 折叠
    cutShowSquare() {
      this.showSquare = !this.showSquare;
    },
  },
};
</script>

<style lang="scss" scoped>
.handle_class {
  background-color: #f4f9ff;
  transition: 0.4s ease;
  height: 100%;
  flex: 0 0 270px;
  overflow: hidden;
  .strut_box {
    height: 100%;
    width: 270px;
    .function_set {
      height: calc(100% - 180px);
      overflow: auto;
      border-bottom: 1px solid #e7e7e7;
      padding: 0 10px;
      .historical_dialogue {
        margin-bottom: 10px;
        margin-top: 10px;
        padding-top: 20px;
        border-top: 1px solid #e7e7e7;
        .el-icon-arrow-down {
          transition: all 0.1s ease;
        }
        .square {
          transition: all 0.1s ease;
          overflow: auto;
          max-height: 1000px;
          .but_chat {
            &:hover {
              .content_list_icon {
                display: inline-block;
              }
            }
            .content_list_icon {
              display: none;
            }
          }
        }
        .squareHeight {
          max-height: 0;
        }
      }
    }
    .foot_location {
      margin: 15px 10px 0;
      .location {
      }
    }
  }
}
.webapp {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 11;
}
.shade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}
.show {
  flex: 0 0 270px;
  width: 270px;
}
.hide {
  flex: 0 0 0px;
  width: 0;
}
.rotate {
  transform: rotate(-90deg);
}
.no_data {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}
</style>
